<!-- 补充资料 -->
<template>
		<custom-navbar title="补充资料"></custom-navbar>
	<view class="supplyInfo">
		<book-link :fileId="fileId"></book-link>
		<view class="controll">
			<view class="title required">
				<text>补充内容</text>
			</view>
			
			<view class="textAreaWrap">
				<textarea v-model="descript"  placeholder="请输入文字描述"  ></textarea>
			</view>
			<view class="title required">
				<text>附件</text>
			</view>
			<process-wrap :fileListInfo="fileListInfo" :documentType="0">
			</process-wrap>
			<view class="empty">
			</view>
			<custom-button @tap="submit">
				确认提交
			</custom-button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import {onLoad} from '@dcloudio/uni-app'
import {useProcessStore} from '@/store/index.js'
import {toAddFillData} from '@/api/document.js'
const processStore = useProcessStore()
const descript = ref("")
const fileId = ref("")
const fileListInfo = [
	{uploadType:"file"},{uploadType:"image"}
]
onLoad((data)=>{
	processStore.clearProcess()
	fileId.value = data.id
})
// 提交补充资料
const submit = async()=>{
	// 对必填项进行校验
	const list = processStore.processPingList
	if(!descript.value || list[0].length === 0 ) {
		let title = ""
		if(!descript.value){
			title += "补充内容"
		}
		if(list[0].length === 0){
			title +=  title ? "、附件" : '附件'
		}
		return uni.showToast({
			icon:'error',
			title:title + '不能为空！'
		})
	} 
	// 校验通过此项操作
	const postData = {
		deliveryId:fileId.value,
		content:descript.value,
		fileOssIds:list[0].reduce((curr,val)=>{
			curr.push(val.ossId)
			return curr
		},[])
	}
	const {code,data:res} = await toAddFillData(postData)
	if(code === 200){
		if(res){
			uni.showToast({
				icon:"success",
				title:"提交成功",
				duration:1000,
				complete() {
					uni.navigateBack()
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.supplyInfo{
	padding: 32rpx;
}
.controll{
	.title{
		font-weight: 600;
		font-size: 32rpx;
		color: #00041A;
		margin: 32rpx 0;
	}
	.textAreaWrap{
		height: 264rpx;
		background: #F5F9FF;
		border-radius: 8rpx;
		border: 1rpx solid #ECEFF4;
		padding: 32rpx;
	}
	.required{
		>text{
		display: inline-block;
		position: relative;
		&::after{
			position: absolute;
			content: "*";
			right: -20rpx;
			top: 50%;
			transform: translateY(-50%);
			color: #FF4122;
		}	
		}
	
	}
	.empty{
		margin-bottom: 80rpx;
	}
}
</style>
